<template>
    <div class="radio-group">
        <label class="radio-label" v-for="option in options" :key="option.value" @click="updateSelectedValue(option.label)">
            <input type="radio" :id="`radio-${option.value}`" :value="option.value" v-model="selectedValue"
                class="radio-input" />
            <span class="radio-custom"></span>
            {{ option.label }}
        </label>
    </div>
</template>

<script setup>
import { ref } from 'vue';

const props = defineProps({
    options: {
        type: Array,
        default: () => [],
    },
    modelValue: {
        type: [String, Number],
        default: null,
    },
});

const emits = defineEmits(['update:modelValue'])

const selectedValue = ref(props.modelValue)

const updateSelectedValue = (value) => {
    selectedValue.value = value;
    emits('update:modelValue', value);
};
</script>

<style scoped>
.radio-group {
    display: flex;
    flex-wrap: wrap;
}

.radio-label {
    display: flex;
    align-items: center;
    margin-right: 15px;
    margin-bottom: 10px;
    cursor: pointer;
}

.radio-input {
    display: none;
}

.radio-custom {
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    border-radius: 50%;
    margin-right: 8px;
    position: relative;
}

.radio-input:checked+.radio-custom::after {
    content: '';
    width: 12px;
    height: 12px;
    background-color: #007bff;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* 移动端适配 */
@media (max-width: 768px) {
    .radio-group {
        flex-direction: column;
    }

    .radio-label {
        margin-bottom: 15px;
    }
}
</style>